<template>
  <div class="content">
    <el-card>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="文章标题:" prop="ArticleTitle">
          <el-input v-model="form.articleTitle" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章分类:" prop="ArticleCategory">
          <el-input v-model="form.articleCategory" placeholder="请输入文章分类"></el-input>
<!--          <el-cascader-->
<!--            placeholder="请选择文章分类"-->
<!--            style="width: 440px"-->
<!--            v-model="form.ArticleCategory"-->
<!--            :options="categoryList"-->
<!--            @change="handleChange"-->
<!--          ></el-cascader>-->
        </el-form-item>
        <el-form-item label="文章作者:" prop="ArticleAuthor">
          <el-input v-model="form.articleAuthor" placeholder="请输入文章作者"></el-input>
<!--          <el-select v-model="form.ArticleAuthor" placeholder="请选择作者">-->
<!--            <el-option-->
<!--              v-for="item in lecturerList"-->
<!--              :key="item.id"-->
<!--              :label="item.name"-->
<!--              :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
        </el-form-item>
        <el-form-item label="文章封面:">
          <el-image
            v-if="form.articleImage"
            :src="form.articleImage"
            style="width: 25%; margin-bottom: 10px;"
          ></el-image>
          <Upload
            ref="uploadFile"
            :upload-list="form.articleImage"
            @uploadFile="uploadFile"
            @removeFile="removeFile"
          />
        </el-form-item>
        <el-form-item label="文章简介" prop="ArticleSummary">
          <el-input
            style="width: 440px"
            maxlength="1000"
            show-word-limit
            type="textarea"
            v-model="form.articleSummary"
            placeholder="请输入文章简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="ArticleContent">
          <mavon-editor
            ref="mavonEditor"
            :ishljs = "true"
            @imgAdd="handleEditorImgAdd"
            @imgDel="handleEditorImgDel"
            v-model="form.articleContent"
            style="width: 100%;height: 400px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">保 存</el-button>
          <el-button @click="$router.back()">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Upload from "../../components/Upload.vue";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
  components: {
    Upload,
    mavonEditor
  },
  data() {
    return {
      form: {
        articleTitle: "",
        articleContent: "",
        articleImage: "",
        articlePubDate: "",
        articleUpDate: "",
        articleStatus: "",
        articleCategory: "",
        articleAuthor: "",
        articleSummary: ""
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.getArticleDetail();
    }
  },
  methods: {
    // 获取文章详情
    async getArticleDetail() {
      const { data: res } = await this.$axios.get("/Article/getById", { params: { id: this.$route.query.id } });
      if (res.success) {
        this.form = res.data;
      }
    },
    async getCourseCategory() {
      const result = await this.$axios.get("/course/getCategory");
      if (result.data.success) {
        this.categoryList = result.data.data;
      } else {
        this.$message.error(result.data.message);
      }
    },
    // 提交表单
    onSubmit(formName) {
      let htmlContent = this.$refs.mavonEditor.d_render;
      this.form.ArticleContent = htmlContent;
      let url = "/Article/update";
      this.$axios.put(url, this.form).then((res) => {
        if (res.data.success) {
          this.$message.success("更新成功！");
          this.$router.go(-1);
        } else {
          this.$message.error(res.data.msg);
        }
      });

    },
    // 上传文件
    uploadFile(file) {
      //如果是多个文件ArticleImage 为数组 使用push
      this.form.articleImage = file;
      console.log(this.form.ArticleImage)
    },
    // 删除文件
    removeFile(id) {
      this.form.articleImage="";
    },
    handleEditorImgAdd (pos, $file) {
      let formdata = new FormData()
      formdata.append('file', $file)
      this.imgFile[pos] = $file
      this.$axios.post('/FileUpload/upload', formdata).then(res => {
        if (res.data.success) {
          this.$message.success('上传成功')
          console.log(res.data)
          let url = res.data.filePath
          let name = $file.name
          if (name.includes('-')) {
            name = name.replace(/-/g, '')
          }
          let content = this.form.ArticleContent
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)  这里是必须要有的
          if (content.includes(name)) {
            let oStr = `(${pos})`
            let nStr = `(${url})`
            let index = content.indexOf(oStr)
            let str = content.replace(oStr, '')
            let insertStr = (soure, start, newStr) => {
              return soure.slice(0, start) + newStr + soure.slice(start)
            }
            this.form.ArticleContent = insertStr(str, index, nStr)
          }
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handleEditorImgDel (pos) {
      delete this.imgFile[pos]
    },


  },
};
</script>

<style scoped>
.el-input,
.el-select {
  width: 440px;
}
</style>
